/* pages/test_echart/test_echart.wxss */

@import '../../style/pubLayout.wxss';

.g-container {
  // height: 100%;

  >.g-main {
    display: flex;
    flex-direction: column;
    color: #101010;

    .chart_wrap {
      width: 100%;
      // padding-bottom: 56rpx;
      background: #fff;

      >.chart_setting {
        display: flex;
        justify-content: flex-end;

        >.setting {
          display: flex;
          align-items: center;
          padding: 10rpx 14rpx 0;
          font-size: 24rpx;

          >.icon {
            // width: 40rpx;
            margin-right: 8rpx;
            font-size: 28rpx;
            color: #bebebe;
          }
        }
      }

      >.chart_item {
        // width: 100%;
        margin-bottom: 56rpx;
        padding-left: 44rpx;
        
        &:nth-child(2) {
          margin-top: -24rpx;
        }
        
        >.chart_title {
          margin-bottom: 56rpx;
          font-size: 32rpx;
          font-weight: bold;
        }

        >.chart_sub {
          margin-bottom: 48rpx;
          color: #fa8447;
        }

        >.chart {
          width: 100%;
          height: 190px;
        }

        >.rank {
          margin: 32rpx 44rpx 0 0;
          padding: 0 24rpx 8rpx;
          border-radius: 4rpx;
          font-size: 28rpx;
          color: #101010;
          background: #f7f8fa;

          >.rank_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 28rpx 0 36rpx;

            >.wrap_left {
              display: flex;
              align-items: center;

              >.icon {
                width: 36rpx;
                height: 0;
                margin-left: 8rpx;
              }
            }

            >.wrap_right {
              color: rgb(135, 135, 135);
            }
          }

          >.rank_content {
            font-size: 28rpx;

            >.rank_item {
              display: flex;
              align-items: center;
              margin-bottom: 24rpx;

              >.icon {
                width: 40rpx;
                height: 0;
                margin-right: 16rpx;
              }

              >.text {
                flex: 1;
              }
            }
          }
        }
      }
    }
  }
}